<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html {
                font-size: 100px;
            }
            /* 1rem = html.font-size */
            body {
                font-size: .18rem;
            }
            .wrapper {
                /*垂直居中*/
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                transform: translateY(-50%); 
            }
            .wrapper__img {
                display: block;
                margin: 0 auto .4rem auto;
                width: .66rem;
                height: .66rem;
            }
            .wrapper__input {
                height: .48rem;
                margin: 0 .4rem .16rem .4rem;
                background: #f9f9f9;
                border-radius: 6px;
                border: 1px solid rgba(0, 0, 0, .1);
            }
            .wrapper__input__content {
                width: 100%;
                height: .48rem;
                border: none;
                outline: none;
                background: none;
                padding: 0 .16rem;        
            }
            input::placeholder {
                color: rgba(0, 0, 0, .5); 
            }
            .wrapper__loginButton {
                margin: .32rem .4rem 0 .4rem;
                background: #0091FF;
                box-shadow: 0 .04rem .08rem 0 rgba(0, 145,255,.32);
                border-radius: 0.4rem;
                color: #fff;
                line-height: .48rem;
                font-size: .16rem;
                text-align: center;
            }
            .wrapper__register {
                margin: .32rem .4rem .16rem .4rem;
                font-size: .14rem;
                color: #777;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <img class="wrapper__img" src="./images/user.png" alt="user">
            <div class="wrapper__input">
                <input  class="wrapper__input__content" type="text" placeholder="请输入用户名">
            </div>
            <div class="wrapper__input">
                <input  class="wrapper__input__content" type="password" placeholder="输入密码">
            </div>
            <div class="wrapper__loginButton">登陆</div>
            <div class="wrapper__register"><span>立即注册</span>&nbsp;&nbsp;<span>忘记密码</span></div>
        </div>
        <script>
            function Login() {
                var userName = document.getElementById("userName").value
                var password = document.getElementById("password").value
                console.log(userName, password)
                if (userName.length > 0 && password.length > 0) {
                    alert(`用户名: ${userName} 密码: ${password}`)
                } else {
                    alert("请输入用户名密码")
                }
            }
        </script>
    </body>
</html>